<template>
  <div>

    <el-card>
      <el-select
        v-model="selectSchedule"
        style="width: 50%;"
        placeholder="请选择进度"
        clearable
        multiple
        collapse-tags-tooltip
        @change="changeSchedule"
      >
        <el-option
          v-for="item in scheduleNameList"
          :key="item"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-card>

    <div
      v-for="(item,index) in scheduleList"
      :key="index"
    >
      <div
        v-if="item.show"
        style="padding-top: 10px;"
      >
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ item.name }}</span>
            </div>
          </template>

          <div style="display: flex;">
            <searchBox @searchChange="searchChange($event,index)" />
            <el-select
              v-model="item.progress"
              placeholder="请选择步骤"
              style="width: 15%; margin-top: 20px;"
              clearable
              multiple
              filterable
              @change="selectProgress($event,index,item.name)"
            >
              <el-option
                v-for="progress in item.progressList"
                :key="progress"
                :label="progress"
                :value="progress"
              />
            </el-select>
          </div>
          <el-tabs type="border-card">
            <el-tab-pane label="概览">
              <barChart
                ref="new"
                title=" "
                :checkpoint-names="item.checkpointNames"
                :total-data="item.totalData"
                :new-data="item.newData"
                type="bar"
              />
            </el-tab-pane>
            <el-tab-pane label="详细数据">
              <el-table
                ref="multipleTable"
                style="width: 100%"
                tooltip-effect="dark"
                row-key="ID"
                :data="item.tableData"
                :height="item.tableData.length > 10 ? 600 : null"
                border
              >

                <el-table-column
                  align="left"
                  label="日期"
                  prop="date"
                />
                <el-table-column
                  align="left"
                  label="关卡"
                  prop="checkPoint"
                />
                <el-table-column
                  align="left"
                  label="平均首通(秒)"
                  prop="firstPass"
                  sortable
                />
                <el-table-column
                  align="left"
                  label="失败率"
                  prop="lostRate"
                  sortable
                />
                <el-table-column
                  align="left"
                  label="新增广告数"
                  prop="newRemain"
                  sortable
                />
                <el-table-column
                  align="left"
                  label="次留广告数"
                  prop="timeRemain"
                  sortable
                />
                <el-table-column
                  align="left"
                  label="三留广告数"
                  prop="threeRemain"
                  sortable
                />
                <el-table-column
                  align="left"
                  label="七留广告数"
                  prop="sevenRemain"
                  sortable
                />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref } from 'vue'
import barChart from '../../components/echarts/barChart.vue'
import searchBox from '../../components/search/searchBox.vue'

import { rpcGet } from '@/api/rpc'
import {
  getHugeList
} from '@/api/openApi'
import { ElMessage, ElMessageBox } from 'element-plus'

// const isPlatform = () => {
//   const platform = localStorage.getItem('platform')
//   console.log(platform)
//   if (platform == 0 || platform == '' || platform == null || platform == undefined) {
//     ElMessage({
//       type: 'error',
//       message: '请先选择渠道'
//     })
//     setTimeout(() => {
//       window.location.href = '/#/layout/dashboard'
//     }, 1000)
//   }
// }

const selectServer = ref('')
const serverList = ref([])
const selectSchedule = ref([])
const scheduleNameList = ref([])

const getServerList = () => {
  rpcGet({ server: 'HugeServiceServer.getServer' }).then(res => {
    if (res.code == 0) {
      serverList.value = res.data
    }
  })
}

getServerList()

// isPlatform()
// =========== 表格控制部分 ===========
const scheduleList = ref([])
const searchInfo = ref([])

var searchChange = function(date, index) {
  searchInfo.value[index] = date
  scheduleList.value[index].progress = []
}

const getProgressList = async() => {
  const table = await getHugeList({ type: 'scheduleProgress' })
  if (table.code == 0) {
    scheduleNameList.value = []
    scheduleList.value = []
    selectSchedule.value = []
    if (table.data.list.length > 0) {
      const response = JSON.parse(table.data.list[0].response)
      response.forEach(item => {
        scheduleNameList.value.push({ label: item.name, value: item.name })
      })
      scheduleList.value = response
    }
  }
}

const changeSchedule = (val) => {
  // 循环判断是否有相同的进度 如果有的话 就添加show为true 反之为false
  scheduleList.value.forEach(item => {
    if (val.includes(item.name)) {
      item.show = true
    } else {
      item.show = false
    }
  })
}

const changeServer = () => {
  // 刷新页面
  getProgressList()
}

getProgressList()

const selectProgress = async(event, index, name) => {
  const progressList = event.join(',')
  if (event.length == 0) {
    scheduleList.value[index].checkpointNames = []
    scheduleList.value[index].totalData = []
    scheduleList.value[index].newData = []
    return
  } else {
    const table = await getHugeList({ type: 'scheduleColumn', params: progressList, start_date: searchInfo.value[index].start_date, end_date: searchInfo.value[index].end_date, add_params: name })
    if (table.code == 0) {
      const x = []
      const y1 = []
      const y2 = []
      let data = []
      table.data.list.forEach(item => {
        x.push(item.date)
        data = JSON.parse(item.response)
        y1.push(data.totalUser)
        y2.push(data.newUser)
      })

      scheduleList.value[index].checkpointNames = x
      scheduleList.value[index].totalData = y1
      scheduleList.value[index].newData = y2
    }
  }

  const tableData = await getHugeList({ type: 'scheduleData', params: progressList, start_date: searchInfo.value[index].start_date, end_date: searchInfo.value[index].end_date, add_params: name })
  if (tableData.code == 0) {
    const arr = []
    if (tableData.data.list) {
      tableData.data.list.forEach(item => {
        const jsonData = JSON.parse(item.response)
        jsonData.lostRate = jsonData.lostRate + '%'
        arr.push(jsonData)
      })
      // arr = sumByKey(arr, 'date')
      scheduleList.value[index].tableData = arr
    } else {
      scheduleList.value[index].tableData = []
    }
  }
}

</script>
